<template>
	<!-- 列表内容 -->
	<el-card>
		<el-table :data="list" style="width: 100%" stripe>
			<el-table-column prop="id" label="序号" width="100" />
			<el-table-column prop="subject" label="课程" />
			<el-table-column prop="content" label="内容" width="300" />
			<el-table-column prop="place" label="地点" width="100" />
			<el-table-column label="状态" width="200">
				<template #default="{row}">
					<el-space :size="10">
						<el-switch v-model="row.status" /><span>{{row.status ? '已完成' : '未完成' }}</span>
					</el-space>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<el-button size="small" type="danger" @click="handleDelete(scope.row)" :icon="Delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script setup>
	import { Delete } from '@element-plus/icons-vue'
	import { ElMessageBox } from 'element-plus'
	import { defineProps, defineEmits } from 'vue';

	// 定义可以接收的属性
	const props = defineProps({
		list: {
			type: Array
		},
	});

	// 定义事件
	const emits = defineEmits(['delItem']);

	const handleDelete = (item) => {
		// 只有已完成，可以删除
		if (item.status) {
			emits("delItem", item.id) //触发父组件自定义方法，并传参
		} else {
			ElMessageBox.alert('请完成该学习计划后再进行删除操作！')
		}
	}
</script>

<style>

</style>